<template>
  <div id="app1">

      <el-row>
        <el-col :span="24" height="100px" id="header">
          <div  id="tou">
            <!--<a style="color: antiquewhite;margin-left: 10px;font-size: 14px">欢迎来到美食有谱</a>-->
            <a id="yo" ><router-link to="/login" style="color: antiquewhite;text-decoration: none">登录 注册</router-link></a>
          </div>
          <img src="./pages/img/tu_bian.png" id="tu">
          <div  id="sou">
            <el-input placeholder="请输入内容" v-model="input5">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div style="width: 1150px;margin: 0 auto;">
          <el-menu
                  router
                  :default-active="$route.path"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                  background-color=" #ab2b21"
                  text-color="#f1f1f1"
                  active-text-color="#ffd04b">
            <el-menu-item index="/">首页</el-menu-item>
            <el-submenu index="2">
              <template slot="title">菜谱大全</template>
              <el-menu-item index="2-1">川菜</el-menu-item>
              <el-menu-item index="2-2">粤菜</el-menu-item>
              <el-menu-item index="2-3">湘菜</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" >食材</el-menu-item>
            <el-menu-item index="/share" >美食分享</el-menu-item>
          </el-menu>
          </div>
        </el-col>
      </el-row>

    <div id="app">
      <el-row>
        <el-col :span="24" >
          <div class="main">
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
  </div>

    <div class="app">
      <el-row>
        <el-col :span="24" >
          <div class="main" style="background-color: white;height: 250px">
            <div id="i"><hr></div>
            <div class="t_b  t_b2"></div>
            <div id="j">
              <a id="j1"></a>
              <a id="j2"></a>
            </div>
            <div id="k">
              <pre>关注我们      下载App</pre>
            </div>
            <div id="h">
              <a href="##">关于我们</a> . <a href="##">联系我们</a> . <a href="##">加入我们</a><br>
              <a href="##">服务声明</a> . <a href="##">友情链接</a> . <a href="##">移动应用</a><br>
              <a>版权所有 © 美少女 保留所有权  电话：121-15564826 | 123-54678910</a><br>
              <a> 地址：重庆市巴南区白鹤林16号第一大道16号楼67号</a>
              <br>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  #app1{
    width: 1330px;
    margin: 0 auto;
  }
  #app{
    width: 1150px;
    margin: 0 auto;
  }
  .app{
    width: 1150px;
    margin: 0 auto;

  }
#header{
  background-color: #ab2b21;
}
  #main{
    height: 400px;

  }
  #tu{
    position: absolute;
    left: 90px;
    margin-top: 20px;
  }
  #sou{
    width: 40%;
    margin-left: 50%;
    margin-top: 50px;
  }
  #yo{
    position: absolute;
    right: 10px;
  }
  #tou{
    background-color: #ab2b21;
  }
  #i{
    width: 1150px;
    height: 2px;
    margin-top:40px;
  }
  .t_b{
    position: absolute;
    margin-top: 10px;
    width: 200px;
    height: 90px;

  }
  .t_b2{
    left: 100px;margin-top: 30px;
  }
  #h{
    width: 1150px;
    height: 100px;
    text-align: center;
    color: dimgray;
    font-size: 14px;
    margin-top: 50px;
  }
  #j1,#j2{
    clear: both;
    width: 120px;
    height: 109px;
    position: absolute;
    margin-top: 10px;

  }
  #j1{
    left: 900px;
    background-image: url("./pages/img/shao.jpg");
    background-size:120px 109px;
  }
  #j2{
    left: 1000px;
    background-image: url("./pages/img/shao.jpg");
    background-size:120px 109px;
  }
  /*--------------HHH--JJJ------------------*/
  #k{
    position: absolute;
    margin-left: 950px;
    margin-top: 112px;
    width: 1150px;
  }
</style>
